<template>
  <div class="total">
    <div class="head">
      <el-button type="success" round style="float: left; margin: 20px 0 20px 150px" @click="back">返回</el-button>
      <ul class="list">
        <li class="top" v-for="(item, index) in title" :key="index">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
            {{ item.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="carousel">
      <h3 class="title">最美季节评选</h3>
      <div class="introduce">
        <div class="rule">
          <h3 class="tit">—— 活动规则 ——</h3>
          <ul>
            <li class="rlist" v-for="(tit,index) in rule" :key="index">
              <i :class="tit.icon">
                {{ tit.name }}
                {{ tit.value }}
              </i>
            </li>
          </ul>
        </div>
        
        <div class="text">
          <div class="rule">
            <h3>📚春天</h3>
            <ul>
              <li>▶️三月好事正酿，万物复苏，大家都要如愿以偿。</li>
              <li>▶️我不能遇见更多的春天了，但我想在我遇见的每一个春天，都有你在身边。</li>
              <li>▶️四季初始，万物复苏，一切都会好起来的!</li>
              <li>▶️四月、春天、樱花、团聚、平安，都会来的吧，我盼的春天不是季节，是希望!</li>
              <li>▶️温度在慢慢回温，属于我们的春天要来了</li>
            </ul>
          </div>
          <div class="rule">
            <h3>📚夏天</h3>
            <ul>
              <li>▶️日出和夏天的风，所有浪漫都是我们。</li>
              <li>▶️夏天想躲进海盐冰淇淋里，或者和晚风一起溜出窗去。</li>
              <li>▶️夏天 好友 街头 烧烤 啤酒 晚风 最好还有你。</li>
              <li>▶️16℃的空调，西瓜最中间的那一口，冰的汽水，还有热烈的夏天。</li>
            </ul>
          </div>
          <div class="rule">
            <h3>📚秋天</h3>
            <ul>
              <li>▶️初秋总是温柔，日间把夏天留下，日落后还带秋风。</li>
              <li>▶️想把夏天和可乐装进冰箱里，然后拿出来摇一摇打开，‘嘭’的一声，秋天一涌而出。</li>
              <li>▶️大概我所爱的不是晚秋，是初秋，那时暄气初消，月正圆，蟹正肥，桂花皎洁，也未陷入懔烈萧瑟气态，这是最值得赏乐的。</li>
              <li>▶️世界上美好的东西不太多，立秋傍晚从河对岸吹来的风，和二十来岁笑起来要人命的你</li>
            </ul>
          </div>
          <div class="rule">
            <h3>📚冬天</h3>
            <ul>
              <li>▶️我在秋天储存浪漫，好在冬天馈赠给你。</li>
              <li>▶️把爱留在朝暮之间，这样可以温暖一整天。</li>
              <li>▶️这个冬天，愿你的世界春暖花开；这个冬天，愿你的房间洒满阳光。</li>
              <li>▶️雪花飘落，世界都变得柔软了；和你相遇，感觉冬天都变暖了。</li>
            </ul>
          </div>
        </div>
        <div class="foot">
          <span>XXX提供技术支持</span>
        </div>
      </div>
    </div>
    <!-- 介绍规则 -->
      <!-- 投票规则 -->
    <!-- 底部 -->
    <Foot></Foot>
    
  </div>
</template>

<script>
import Foot from '@/components/Footer'
export default {
    name:'MyDetail',
    components:{
          Foot
      },
    data() {
      return {
      title: [
        { icon: "el-icon-data-board", name: "首页", path:'/interaction' },
        { icon: "el-icon-s-data", name: "详情", path:'/detai' },
        { icon: "el-icon-s-grid", name: "更多", path:'/more' },
      ],
      images: [
        require("@/assets/images/spring.jpg"),
        require("@/assets/images/summer.jpg"),
        require("@/assets/images/fall.jpg"),
        require("@/assets/images/winter.jpg"),
      ],
      rule:[
        {icon:"el-icon-time",name:"活动开始:",value:'2024-3-8'},
        {icon:"el-icon-time",name:"活动结束:",value:'2024-4-8'},
        {icon:"el-icon-circle-check",name:"活动规则:",value:'每个账号每天可以投5次，每个项目最多投1次'}
      ],
      }
    },
    methods:{
      back(){
        this.$router.push('/home')
      }
    }
    
}
</script>

<style scoped>
li{
  list-style: none;
}
.total {
  margin: 80px 0 10px 0;
  padding: 0;
  width: 100%;
  background-color: rgb(208, 255, 201);
}
.head {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  text-align: center;
  background-color: green;
  opacity: 0.6;
}
.head .list {
  margin: 0 15%;
  height: 100%;
}
.head .top {
  width: 30%;
  height: 100%;
  float: left;
  list-style: none;
  margin: 0 5px;
}
.head .top a {
  display: block;
  text-decoration: none;
  line-height: 80px;
  color: #000;
}
.head .top a:hover {
  background-color: #67c23a;
  color: #fff;
}
.carousel {
  /* float: left; */
  width: 80%;
  height: auto;
  margin: 10px auto;
  background: url(../../../assets/images/jijie.png) no-repeat fixed top ;
  background-size: cover;
  /* border-radius: 8px; */
}
.title{
  /* font-family: Impact, sans-serif; */
  text-align: center;
  font-size: 40px;
  color: #d39696;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 
}
.introduce{
  height: auto;
  width: 80%;
  margin: 10px auto;
  border-radius: 8px;
}
.rule{
  width:100%;
  margin: 0 auto;
  border-radius: 8px;
  background-color: #fff;
}
.rule li {
  padding: 3px 0;
}
.tit{
  color: #67c23a;
  margin: 0 auto;
  text-align: center;
}
/* .rlist{
  list-style: none;
  padding: 0 10%;
} */
.foot{
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  color: rgb(117, 134, 151);;
}
</style>